"use client";

import AvatarItem from "@/hall/AvatarItem";
import { Hall } from "@/hall/Hall";
import useGetAbility5KHall from "@/hall/useGetAbility5KHall";
import useGetAbility7KHall from "@/hall/useGetAbility7KHall";
import useGetAbility9KHall from "@/hall/useGetAbility9KHall";
import useGetAtBandHall from "@/hall/useGetAtBandHall";
import useGetAtHighestHall from "@/hall/useGetAtHighestHall";
import useGetAtStandHall from "@/hall/useGetAtStandHall";
import useGetAtTotalHall from "@/hall/useGetAtTotalHall";
import useGetLevelHall from "@/hall/useGetLevelHall";
import useGetTotalBandHall from "@/hall/useGetTotalBandHall";
import useGetTotalHighestHall from "@/hall/useGetTotalHighestHall";
import useGetTotalStandHall from "@/hall/useGetTotalStandHall";
import useGetTotalTotalHall from "@/hall/useGetTotalTotalHall";
import { AvatarLoading } from "@/Loading";

import { useHallStore } from "@/Stores";
import { observer } from "mobx-react-lite";
import { useTranslations } from "next-intl";
import {
  ListGroup,
  Nav,
  NavItem,
  NavLink,
  TabContent,
  TabPane,
} from "reactstrap";

const getAvatarItems = (halls: Hall[]) => {
  return halls.map(({ avatarID, avatarName, text }) => (
    <AvatarItem
      key={avatarID}
      avatarID={avatarID}
      avatarName={avatarName}
      text={text}
    />
  ));
};

export default observer(() => {
  const {
    tabPosition,
    totalTabPosition,
    atTabPosition,
    abilityTabPosition,
    setTabPosition,
    setTotalTabPosition,
    setAtTabPosition,
    setAbilityTabPosition,
  } = useHallStore();
  const t = useTranslations();

  const { data: totalTotalHall, isFetched: isTotalTotalHallLoaded } =
    useGetTotalTotalHall();
  const { data: totalHighestHall, isFetched: isTotalHighestHallLoaded } =
    useGetTotalHighestHall();
  const { data: totalStandHall, isFetched: isTotalStandHallLoaded } =
    useGetTotalStandHall();
  const { data: totalBandHall, isFetched: isTotalBandHallLoaded } =
    useGetTotalBandHall();
  const { data: atTotalHall, isFetched: isAtTotalHallLoaded } =
    useGetAtTotalHall();
  const { data: atHighestHall, isFetched: isAtHighestHallLoaded } =
    useGetAtHighestHall();
  const { data: atStandHall, isFetched: isAtStandHallLoaded } =
    useGetAtStandHall();
  const { data: atBandHall, isFetched: isAtBandHallLoaded } =
    useGetAtBandHall();
  const { data: ability5KHall, isFetched: isAbility5KHallLoaded } =
    useGetAbility5KHall();
  const { data: ability7KHall, isFetched: isAbility7KHallLoaded } =
    useGetAbility7KHall();
  const { data: ability9KHall, isFetched: isAbility9KHallLoaded } =
    useGetAbility9KHall();
  const { data: levelHall, isFetched: isLevelHallLoaded } = useGetLevelHall();

  const getProperties = (i: number) => ({
    className: tabPosition === i ? "active route" : "route",
    onClick: () => {
      setTabPosition(i);
    },
  });

  const getTotalProperties = (i: number) => ({
    className: totalTabPosition === i ? "active route" : "route",
    onClick: () => {
      setTotalTabPosition(i);
    },
  });

  const getAtProperties = (i: number) => ({
    className: atTabPosition === i ? "active route" : "route",
    onClick: () => {
      setAtTabPosition(i);
    },
  });

  const getAbilityProperties = (i: number) => ({
    className: abilityTabPosition === i ? "active route" : "route",
    onClick: () => {
      setAbilityTabPosition(i);
    },
  });

  return (
    <>
      <Nav tabs>
        <NavItem>
          <NavLink {...getProperties(0)}>{t("hallTotalText")}</NavLink>
        </NavItem>
        <NavItem>
          <NavLink {...getProperties(1)}>{t("hallAtText")}</NavLink>
        </NavItem>
        <NavItem>
          <NavLink {...getProperties(2)}>{t("hallAbilityText")}</NavLink>
        </NavItem>
        <NavItem>
          <NavLink {...getProperties(3)}>{t("hallLevelText")}</NavLink>
        </NavItem>
      </Nav>
      <TabContent activeTab={tabPosition}>
        <TabPane tabId={0}>
          <Nav tabs>
            <NavItem>
              <NavLink {...getTotalProperties(0)}>{t("hallTotal")}</NavLink>
            </NavItem>
            <NavItem>
              <NavLink {...getTotalProperties(1)}>{t("hallHighest")}</NavLink>
            </NavItem>
            <NavItem>
              <NavLink {...getTotalProperties(2)}>{t("hallStand")}</NavLink>
            </NavItem>
            <NavItem>
              <NavLink {...getTotalProperties(3)}>{t("hallBand")}</NavLink>
            </NavItem>
          </Nav>
          <TabContent activeTab={totalTabPosition}>
            <TabPane tabId={0}>
              <ListGroup>
                {isTotalTotalHallLoaded ? (
                  getAvatarItems(totalTotalHall)
                ) : (
                  <AvatarLoading loadingCount={50} />
                )}
              </ListGroup>
            </TabPane>
            <TabPane tabId={1}>
              <ListGroup>
                {isTotalHighestHallLoaded ? (
                  getAvatarItems(totalHighestHall)
                ) : (
                  <AvatarLoading loadingCount={50} />
                )}
              </ListGroup>
            </TabPane>
            <TabPane tabId={2}>
              <ListGroup>
                {isTotalStandHallLoaded ? (
                  getAvatarItems(totalStandHall)
                ) : (
                  <AvatarLoading loadingCount={50} />
                )}
              </ListGroup>
            </TabPane>
            <TabPane tabId={3}>
              <ListGroup>
                {isTotalBandHallLoaded ? (
                  getAvatarItems(totalBandHall)
                ) : (
                  <AvatarLoading loadingCount={50} />
                )}
              </ListGroup>
            </TabPane>
          </TabContent>
        </TabPane>
        <TabPane tabId={1}>
          <Nav tabs>
            <NavItem>
              <NavLink {...getAtProperties(0)}>{t("hallTotal")}</NavLink>
            </NavItem>
            <NavItem>
              <NavLink {...getAtProperties(1)}>{t("hallHighest")}</NavLink>
            </NavItem>
            <NavItem>
              <NavLink {...getAtProperties(2)}>{t("hallStand")}</NavLink>
            </NavItem>
            <NavItem>
              <NavLink {...getAtProperties(3)}>{t("hallBand")}</NavLink>
            </NavItem>
          </Nav>
          <TabContent activeTab={atTabPosition}>
            <TabPane tabId={0}>
              <ListGroup>
                {isAtTotalHallLoaded ? (
                  getAvatarItems(atTotalHall)
                ) : (
                  <AvatarLoading loadingCount={50} />
                )}
              </ListGroup>
            </TabPane>
            <TabPane tabId={1}>
              <ListGroup>
                {isAtHighestHallLoaded ? (
                  getAvatarItems(atHighestHall)
                ) : (
                  <AvatarLoading loadingCount={50} />
                )}
              </ListGroup>
            </TabPane>
            <TabPane tabId={2}>
              <ListGroup>
                {isAtStandHallLoaded ? (
                  getAvatarItems(atStandHall)
                ) : (
                  <AvatarLoading loadingCount={50} />
                )}
              </ListGroup>
            </TabPane>
            <TabPane tabId={3}>
              <ListGroup>
                {isAtBandHallLoaded ? (
                  getAvatarItems(atBandHall)
                ) : (
                  <AvatarLoading loadingCount={50} />
                )}
              </ListGroup>
            </TabPane>
          </TabContent>
        </TabPane>
        <TabPane tabId={2}>
          <Nav tabs>
            <NavItem>
              <NavLink {...getAbilityProperties(0)}>⑤K</NavLink>
            </NavItem>
            <NavItem>
              <NavLink {...getAbilityProperties(1)}>⑦K</NavLink>
            </NavItem>
            <NavItem>
              <NavLink {...getAbilityProperties(2)}>9K</NavLink>
            </NavItem>
          </Nav>
          <TabContent activeTab={abilityTabPosition}>
            <TabPane tabId={0}>
              <ListGroup>
                {isAbility5KHallLoaded ? (
                  getAvatarItems(ability5KHall)
                ) : (
                  <AvatarLoading loadingCount={50} />
                )}
              </ListGroup>
            </TabPane>
            <TabPane tabId={1}>
              <ListGroup>
                {isAbility7KHallLoaded ? (
                  getAvatarItems(ability7KHall)
                ) : (
                  <AvatarLoading loadingCount={50} />
                )}
              </ListGroup>
            </TabPane>
            <TabPane tabId={2}>
              <ListGroup>
                {isAbility9KHallLoaded ? (
                  getAvatarItems(ability9KHall)
                ) : (
                  <AvatarLoading loadingCount={50} />
                )}
              </ListGroup>
            </TabPane>
          </TabContent>
        </TabPane>
        <TabPane tabId={3}>
          <ListGroup>
            {isLevelHallLoaded ? (
              getAvatarItems(levelHall)
            ) : (
              <AvatarLoading loadingCount={50} />
            )}
          </ListGroup>
        </TabPane>
      </TabContent>
    </>
  );
});